<template>
<div>
    <van-nav-bar placeholder=true title="分类-笔记本" left-text="返回" left-arrow @click-left="onClickLeft" />
<van-row type="flex">
<van-col span="6">

<van-sidebar class="sidebar"  v-model="activeKey">
    <van-sidebar-item title="笔记本" to="/laptop" />
    <van-sidebar-item title="摄影摄像" to="/Photography" />
    <van-sidebar-item title="手机" to="/phone"/>
    <van-sidebar-item title="游戏机" to="/xbox"/>
</van-sidebar>

</van-col>

<van-col span="6">

<van-grid :border="false">
<van-grid-item @click="ilianxian">
    <van-image src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/3069bc10574c4fadb72e24f9db049fd4.jpg" width="80px" height="80px"/>
    <span>联想笔记本</span>
</van-grid-item>
<van-grid-item @click="ishenzhou">
    <van-image src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/d6a1dc0d37224b60a7aafe7392025143.jpg" width="80px" height="80px"/>
    <span>神州笔记本</span>
</van-grid-item>
<van-grid-item @click="ixiaomi">
    <van-image src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/7d87631ee9d84e3c8753dd98a574dfee.jpg" width="80px" height="80px"/>
    <span>小米笔记本</span>
</van-grid-item>
<van-grid-item @click="iredmi">
    <van-image src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/64832a31ce414434b82f9adfef5b6307.jpg" width="80px" height="80px"/>
    <span>redmibook</span>
</van-grid-item>
</van-grid>

<div style="height:100px"></div>
</van-col>

<van-col span="6">

<van-grid :border="false">
<van-grid-item @click="idell" >
    <van-image src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/c0e75d7b113d44cc8f4738c9937abc88.jpg" width="80px" height="80px"/>
    <span>戴尔笔记本</span>
</van-grid-item>
<van-grid-item @click="ihuashuo">
    <van-image src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/06d83eb8f7ee4d9f9bbf45eb1c28b337.jpg" width="80px" height="80px"/>
    <span>华硕笔记本</span>
</van-grid-item>
<van-grid-item  @click="ihp">
    <van-image src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/dcdedd6190474db7946aac720825b21e.jpg" width="80px" height="80px"/>
    <span>惠普笔记本</span>
</van-grid-item>
</van-grid>

<div style="height:100px"></div>
</van-col>

<van-col span="6">

<van-grid :border="false">
<van-grid-item>
    <van-image @click="ihj" src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/47d33681024945f9abab0649ec63b3d2.jpg"  width="80px" height="80px" />
    <span>宏基笔记本</span>
</van-grid-item>
<van-grid-item>
    <van-image @click="iAlie" src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/1ce54a4bf8fc44e99d7ea30abd1ae2c0.jpg" width="80px" height="80px" />
    <span>外星人笔记本</span>
</van-grid-item>
<van-grid-item>
    <van-image @click="imsi"  src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/6046f8bf6183496885e5d937929f4840.jpg" width="80px" height="80px" />
    <span>微星笔记本</span>
</van-grid-item>
</van-grid>

<div style="height:100px"></div>
</van-col>

</van-row>
</div>
</template> 

<script>
export default {
    data() {
    return {
        activeKey: 0,
        }
    },
    mounted() {
    },
    created() {
    },
    destroyed() {
    },
    methods: {
    ilianxian(){
    this.$store.commit("changesousuoinput", "联想笔记本")
    this.$router.push({path: '/sousuo',})},
    ishenzhou(){
    this.$store.commit("changesousuoinput", "神州笔记本")
    this.$router.push({path: '/sousuo',})},
    ixiaomi(){
    this.$store.commit("changesousuoinput", "小米笔记本")
    this.$router.push({path: '/sousuo',})},
    iredmi(){
    this.$store.commit("changesousuoinput", "redmibook")
    this.$router.push({path: '/sousuo',})},
    idell(){
    this.$store.commit("changesousuoinput", "戴尔笔记本")
    this.$router.push({path: '/sousuo',})},
    ihuashuo(){
    this.$store.commit("changesousuoinput", "华硕笔记本")
    this.$router.push({path: '/sousuo',})},
    ihp(){
    this.$store.commit("changesousuoinput", "惠普笔记本")
    this.$router.push({path: '/sousuo',})},
    ihj(){
    this.$store.commit("changesousuoinput", "宏基笔记本")
    this.$router.push({path: '/sousuo',})},
    iAlie(){
    this.$store.commit("changesousuoinput", "外星人笔记本")
    this.$router.push({path: '/sousuo',})},
    imsi(){
    this.$store.commit("changesousuoinput", "微星笔记本")
    this.$router.push({path: '/sousuo',})},
    onClickLeft() {   
        this.$store.commit("changesousuoinput", "")
        this.$router.push({
        path: '/sousuo', })
    },
    },
}
</script>
<style scoped>
.sidebar{
    position:fixed;
    top:10vh;
    left: 0px;
}
span{
    font-size: larger;
}
</style>
